<template>
    <div style="height:100%">
      <div class="container">
        <!-- 返回 -->
      <div class="rollback">
        <el-button type="text" icon="iconfont icon-fanhui" @click="rollback">返回上一层</el-button>
      </div>

      <operation>
          <template #left>
            <el-form label-width="70px">
              <el-form-item label="用户姓名">
                <el-input v-model="form.name" placeholder="请输入..." style="width:140px"></el-input>
              </el-form-item>
              <el-form-item label="身份证号">
                <el-input v-model="form.idNumber" placeholder="请输入..." style="width:140px"></el-input>
              </el-form-item>
              <!-- 出发地址 -->
              <el-form-item  rm-item label="出发地址">
                <el-cascader
                  ref="address"
                  clearable
                  placeholder="请选择..."
                  size="large"
                  :options="options"
                  v-model="selectedOptions"
                  @change="handleChange"
                  :filterable="true"
                  style="width:180px">
                </el-cascader>
              </el-form-item>
              <!-- 到达地址 -->
              <el-form-item  rm-item label="到达地址">
                <el-cascader
                  ref="address"
                  clearable
                  placeholder="请选择..."
                  size="large"
                  :options="options"
                  v-model="selectedOptions"
                  @change="handleChange"
                  :filterable="true"
                  style="width:180px">
                </el-cascader>
              </el-form-item>
            </el-form>
          </template>
          <template #right>
            <el-button native-type="submit" plain class="search" @click.prevent="search">查询</el-button>
            <el-button plain class="reset" @click="reset">重置</el-button>
          </template>
        </operation>
      </div>
    </div>
</template>

<script>
import { regionData, codeToText } from 'element-china-area-data';
import operation from '@/components/operation/index.vue';

export default {
  components: {
    operation,
  },
  name: '',
  data() {
    return {
      form: {
        name: '',
        idNumber: '',
        address: '',
      },
      options: regionData,
      selectedOptions: [],
      userdata: [],
      page: '1',
      pagesize: '10',
      total: 0,
      count: 0,
    };
  },
  methods: {
    rollback() {
      this.$router.back();
    },
    handleChange(value) {
      console.log(codeToText[value[0]], codeToText[value[1]], codeToText[value[2]]);
    },
    search() {

    },
    reset() {

    },
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.el-form {
  display: flex;
}

.el-form-item {
  margin-bottom: 0;
  margin-right: 20px;
}
::v-deep .rollback button i {
  font-size: 20px;
  margin-right: 5px;
  color: #000;
}
</style>
